<template>
  <div style="background-color: white">
    <div class="probox">
      <div style="display: flex; width: 300px; justify-content: space-between">
        <el-select v-model="types" placeholder="按照订单号搜索">
          <el-option label="按照订单号搜索" value="orderId"></el-option>
          <el-option label="按照收件人搜索" value="recipient"></el-option>
        </el-select>
        <el-input
          v-model="input"
          style="width: 120px"
          placeholder="订单号"
        ></el-input>

        <el-button type="primary" icon="el-icon-search" @click="Search"
          >搜索</el-button
        >
      </div>
    </div>
    <el-divider></el-divider>

    <div style="padding: 20px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="orderId" label="订单号" width="180">
        </el-table-column>
        <el-table-column prop="recipient" label="收件人" width="150">
        </el-table-column>
        <el-table-column prop="payStatus" label="订单状态" width="150">
        </el-table-column>
        <el-table-column prop="allPrice" label="订单总价价格" width="150">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="180">
        </el-table-column>
        <el-table-column label="操作选项">
          <template slot-scope="scope">
            <router-link to="/index/orderdetail"
              ><el-button type="text" @click="getOrderinfo(scope.row)"
                >查看详情</el-button
              ></router-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        @current-change="changePage"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions(["getOrderinfos", "searchs", "orders"]),
    getOrderinfo(row) {
      console.log(66, row);
      var value = row._id;
      this.getOrderinfos(value);
    },

    Search() {
      console.log(this.types, this.input);
      var type = this.types;
      var value = this.input;
      this.searchs({ type, value });
    },

    changePage(pageNum) {
      console.log(pageNum, this.pageSize);

      var pageSize = this.pageSize;
      this.orders({ pageNum, pageSize });
    },
  },
  data() {
    return {
      types: "",
      input: "",
    };
  },
  computed: {
    tableData() {
      var Data = this.$store.state.order.orders.list;
      console.log(Data)
      if (Data) {
        Data.forEach((item) => {
          item.create_time = this.$formatDate(item.create_time);
          if(item.payStatus==1){
            item.payStatus="未支付"
          }else{
            item.payStatus="已支付"
          }
          
        });
       
      }
       return Data;
    },
    total() {
      return this.$store.state.order.orders.total;
    },
    pageNum() {
      return Number(this.$store.state.order.orders.pageNum);
    },
    pageSize() {
      return Number(this.$store.state.order.orders.pageSize);
    },
  },
};
</script>